import React, { Component } from 'react'

export default class ComC extends Component {
    constructor(){
        // 调用super, 就可以使用this了
        super();
        this.state = {
            // 状态机, 类似vue中的data, 初始化数据
            age: 18,
            name: 'Tony'
        }
        this.fn5 = this.fn5.bind(this)
    }
    // 函数直接写在类里面
    fn1(){
        console.log(666);
    }
    fn2(age){
        console.log(this);
        console.log(age);
    }
    fn3(e){
        console.log(e);
    }
    fn4(age,e){
        console.log(age);
        console.log(e);
    }
    fn5(){
        // setState第一个参数, 只写需要修改的哪几项就行, 不需要写完整的对象
        // console.log(555,this.state.age);
        // this.state.age = 20;
        // 修改state中的值, 需要通过setState方法. 这个函数是异步的, 想要获取最新的状态, 可以通过第二个参数获取. 第二个参数是一个回调函数, 会在修改数据后执行.
        this.setState({
            age: 20
        }, ()=>{
            console.log(this.state.age);
        })
    }
    render() {
        return (
            <div>
                <h1>{this.state.age}</h1>
                {/* call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。 */}
                <button onClick={this.fn1}>点击-无参数</button>
                <button onClick={() => this.fn1()}>点击-无参数</button>
                <hr/>
                <button onClick={this.fn2.bind(this,this.state.age)}>点击-有参数</button>
                {/* <button onClick={this.fn2()}>点击-有参数 未使用bind</button> */}
                <button onClick={() => this.fn2(this.state.age)}>点击-有参数</button>
                <hr/>
                {/* ES5是隐式传递 */}
                <button onClick={this.fn3.bind(this)}>点击-事件对象</button>
                {/* ES6是显式传递 */}
                <button onClick={(event) => this.fn3(event)}>点击-事件对象</button>
                <hr/>
                {/* 自定义数据和时间对象都要 */}
                <button onClick={this.fn4.bind(this,this.state.age)}>点击-全都要</button>
                <button onClick={(e) => this.fn4(this.state.age,e)}>点击-全都有</button>
                <hr/>
                {/* 直接在构造函数中绑定this, 其他地方可以直接调用, ES5的方式 */}
                <button onClick={this.fn5}>点击修改</button>
            </div>
        )
    }
}


